<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('finance.rolloverRecord')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="extensionPayNumber" label="">
                            <el-input v-model="form.extensionPayNumber" :placeholder="$t('common.paymentSerialNumber')" clearable></el-input><!--支付序列号-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="extensionTime" style="width: 100%"><!--展期时间-->
                            <el-date-picker
                                v-model="form.extensionTime"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="timestamp"
                                :editable="false"
                                style="width: 100%;"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('common.extensionStartTime')"
                                :end-placeholder="$t('common.extensionEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                        <el-table-column :label="$t('common.innerOrderId')" prop="orderId" width="200"></el-table-column><!--内部订单号-->
                        <el-table-column label="UserId" prop="userId" min-width="140"></el-table-column>
                        <el-table-column :label="$t('common.name')"  prop="userName" min-width="150"></el-table-column><!--姓名-->
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" width="150"></el-table-column><!--手机号码-->
                        <el-table-column prop="userCardId" :label="$t('common.idCardNumber')" min-width="150"></el-table-column><!--身份证号-->
                        <el-table-column prop="extensionTime" :label="$t('common.extensionTime')" min-width="180"><!--展期时间-->
                            <template slot-scope="{ row }">{{ row.extensionTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="extensionDay" :label="$t('common.extensionDays')" min-width="120"></el-table-column><!--展期天数-->
                        <el-table-column prop="newRepayTime" :label="$t('common.newExpiryDate')" min-width="180"><!--新到期日-->
                            <template slot-scope="{ row }">{{ row.newRepayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="oldRepayTime" :label="$t('common.originalExpiryDate')" min-width="180"><!--原到期日-->
                            <template slot-scope="{ row }">{{ row.oldRepayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="lateDays" :label="$t('common.extensionOverdueDays')" min-width="170"></el-table-column><!--展期时逾期天数-->
                        <el-table-column prop="appName" :label="$t('system.appName')" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column prop="appPackage" :label="$t('system.appPackage')" min-width="130"></el-table-column><!--APP包名-->
                        <el-table-column :label="$t('common.payChannel')" prop="channelCompany" width="120"><!--支付渠道-->
                            <template slot-scope="{ row }">{{ row.channelCompany | SwitchChannelCompany }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.payMethod')" prop="payChannel" width="150">
                            <template slot-scope="{ row }">{{ row.payChannel | SwitchLoanChannel }}</template><!--支付方式-->
                        </el-table-column>
                         <el-table-column :label="$t('common.paymentSerialNumber')" prop="extensionPayNumber" min-width="170"> <!--支付序列号--></el-table-column>
                         <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" width="100">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowingCycle')" prop="loanPeriod" width="100">
                            <template slot-scope="{ row }">{{ row.loanPeriod }}{{ $t('common.day') }}</template><!--借款周期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanAmount')" prop="loanAmount" width="100">
                            <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template><!--放款金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.extensionAmount')" prop="extensionFee" width="100">
                            <template slot-scope="{ row }">{{ row.extensionFee | formatCurrency }}</template><!--展期费金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.paymentFee')" prop="transactionFee" width="120"><!--支付手续费-->
                            <template slot-scope="{ row }">{{ row.transactionFee | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.addFee')" prop="tax" width="100"><!--增值税-->
                            <template slot-scope="{ row }">{{ row.tax | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.actualCreditAmount')" prop="actualAmount" width="120"><!--实际入账金额-->
                            <template slot-scope="{ row }">{{ row.actualAmount | formatCurrency }}</template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import keyMap from "@/config/key-map"
    import SelectAppList from '@/components/select-app-list';

    export default {
        name: 'repayNotRepay',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                keyMap,
                form: {
                    orderId: '',
                    userPhone: '',
                    userId: '',
                    extensionPayNumber: '',
                    appName: '',
                    extensionTime: ''
                },
                rules: {
                    orderId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userPhone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ]
                },
            };
        },
        methods: {
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.finance.repay.extensionRecordList(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                });
            },
            search() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            exportExcel() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.finance.repay.extensionRecordListExcel, ['page']);
                this.$openNewBlank(url);
            },
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: '',
                    userPhone: '',
                    userId: '',
                    extensionPayNumber: '',
                    appName: '',
                    extensionTimeStart: '',
                    extensionTimeEnd: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key] && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.extensionTime) {
                    params.extensionTimeStart = form.extensionTime[0];
                    params.extensionTimeEnd = form.extensionTime[1];
                }
                return params;
            }
        },
        created() {
            this.tableMaxHeight = document.body.clientHeight - 265;
            this.getTableData();
        }
    }
</script>
<style lang="scss" scoped>

</style>
